<!-- @format -->

<template>
  <div class="products" style="position: relative;">
    <!-- 顶部 -->
    <!-- <div class="top">
      <span>商品</span>
      <span>评价</span>
      <span>详情</span>
    </div> -->
    <!-- 轮播图 -->
    <div
      class="icon"
      @click="clickBefore"
      style="position: absolute;left: 5px;top: 5px;z-index: 10;width: 30px;height: 30px;background: aliceblue;border-radius: 50%;text-align: center;line-height: 20px;"
    >
      <van-icon name="arrow-left" style="margin-top:5px;font-size:20px" />
    </div>
    <div class="detail_a">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item, index) in 5" :key="index">
          <img :src="somepic[index].picUrl" alt="" />
          <!-- 返回键 -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 描述 -->
    <div class="dec">
      <span>{{ list.sameSpuProductList[0].description }}</span>
    </div>
    <!-- 价钱 -->
    <div class="item_info">
      <div class="price">
        ￥ {{ list.sameSpuProductList[0].promotionPrice.toFixed(2) }}
      </div>

      <div class="name">
        {{ list.sameSpuProductList[0].name }}
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="item_info2">
      <div class="choose">
        <span>已选 </span>{{ list.sameSpuProductList[0].name }}
      </div>
      <hr />
      <div class="explain">
        <span>
          <i>
            <!-- <img src="" alt="" /> -->
            <van-icon name="success" color="red" />
            <em>免邮费</em>
          </i>
        </span>
        <span>
          <van-icon name="success" color="red" />
          <em>官方正品保障</em>
        </span>
        <span>
          <van-icon name="success" color="red" />
          <em>两年全国联保</em>
        </span>
        <span>
          <van-icon name="success" color="red" />
          <em>7天无忧退换货</em>
        </span>
        <span>
          <van-icon name="success" color="red" />
          <em>24小时发货</em>
        </span>
      </div>
      <hr />
    </div>
    <!-- 用户评价 -->
    <div class="evaluationCon">
      <div class="cont">用户评价 {{ list.comment.count }}</div>
      <div class="content">22</div>
    </div>
    <!-- 商品详情 -->
    <div class="item_desc_title">商品详情</div>
    <!-- 图片 -->
    <div class="item_desc_wrap" v-html="swpic"></div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-badge
        :content="shopcart.count"
        style="position: absolute;left: 71px;top:0px;"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="carHandle" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="buyHandle(item.product.productSn)"
      />
    </van-goods-action>
    <!-- 弹出框 -->
    <van-sku
      v-model="show"
      :price="list.sameSpuProductList[0].promotionPrice.toFixed(2)"
      :sku="sku"
      :goods="goods"
      :show-add-cart-btn="!show"
      buy-text="确定"
      :hide-stock="true"
      :hide-selected-text="true"
      @buy-clicked="BuyClicked"
      @stepper-change="changenum"
    />
  </div>
</template>

<script>
import { getData } from "../../main";
import { Toast } from "vant";
import { post } from "@utils/request";
import { mapState } from "vuex";
export default {
  data() {
    return {
      buycount: 1,
      list: {
        sameSpuProductList: [{ promotionPrice: 100.45 }],
        comment: {
          count: {}
        }
      },
      somepic: [
        { picUrl: "1" },
        { picUrl: "2" },
        { picUrl: "3" },
        { picUrl: "4" },
        { picUrl: "5" }
      ],
      swpic: "",
      show: false,
      data: 10,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        stock_num: 227,
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合

        price: "", // 默认价格（单位元）
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false // 是否无规格商品
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: ""
      }
    };
  },
  computed: {
    ...mapState(["shopcart"])
  },
  watch: {},
  methods: {
    changenum(value) {
      console.log(value);
      this.buycount = value;
    },
    BuyClicked() {
      Toast("添加购物车成功");
      let shopdata = {
        name: this.list.product.name,
        img: this.list.product.pic,
        desc: this.list.product.description,
        price: this.list.product.promotionPrice,
        count: this.buycount
      };
      console.log(shopdata);
      post("http://localhost:3000/shopcart/addShopcart", shopdata).then(res => {
        console.log(res);
      });
      this.show = !this.show;
    },
    clickBefore() {
      this.$router.push({ name: "Class" });
    },
    carHandle() {
      this.$router.push({
        name: "ShopCart"
      });
    },
    addCart() {
      this.show = !this.show;
    },
    onBuyClicked() {
      Toast.success("添加购物车成功");
    },
    buyHandle(productSn) {
      console.log(0);
      console.log(productSn);
      this.$router.push({ name: "ShopCart", query: { productSn } });
    }
  },
  created() {
    //   接收分类页面传过来的productSn
    getData(`/api/b2c/product/0-0/detail/${this.$route.query.productSn}`).then(
      res => {
        this.list = res.data.data;
        this.swpic = this.list.product.detailMobileHtml;
        this.somepic = this.list.productPics;
        this.sku.price = this.list.sameSpuProductList[0].promotionPrice.toFixed(
          2
        );
        this.goods.picture = this.somepic[0].picUrl;
      }
    );
  },
  mounted() {},
  components: {}
};
</script>

<style scoped lang="scss">
@import "@sass/Products/Products.scss";
</style>
